<template>
  <div>
	  <t-card>
		  <t-table
		    :data="data"
		    :columns="COLUMNS"
		    row-key="id"
		    vertical-align="top"
		    :hover="true"
		    :pagination="pagination"
		    :loading="dataLoading"
		    :selected-row-keys="selectedRowKeys"
		    @page-change="rehandlePageChange"
		  >
		    <template #jobStatus="{ row }">
		      <t-tag v-if="row.jobStatus === 1" variant="light"> 待完成 </t-tag>
		      <t-tag v-if="row.jobStatus === 2" theme="primary" variant="light"> 己完成 </t-tag>
		    </template>
		    <template #op="slotProps">
		      <a class="t-button-link" @click="edit(slotProps)">编辑</a>
		    </template>
		  </t-table>
		  
		   <template #actions> 
				  <t-button variant="outline" @click="_=>visibleAdd=true">添加用户</t-button>
		   </template>
	  </t-card>
      
	<t-dialog :visible="visibleAdd" header="添加新用户" :footer="null" @close="visibleAdd=false">
		<userAdd :data="editData" @complete="refresh()"></userAdd>
	</t-dialog>
  </div>
</template>

<script lang="ts">
  export default {
    name: 'UserList',
  };
</script>
<script setup lang="ts">
  import { ref,reactive, computed } from 'vue';
  import { useRouter } from 'vue-router';
  import { MessagePlugin } from 'tdesign-vue-next';
  import { fetchUserList } from '@/api/user';
  import { prefix } from '@/config/global';
  import userAdd from '@/components/user/userAdd.vue'

const visibleAdd=ref(false)
const COLUMNS=ref([])
COLUMNS.value=[
  // { colKey: 'row-select', type: 'multiple', width: 64, fixed: 'left' },
  // {
  //   title: 'id',
  //   align: 'left',
  //   width: 120,
  //   ellipsis: true,
  //   colKey: 'Id',
  //   //fixed: 'left',
  // },
  
  {
    title: '登录名',
    align: 'left',
    width: 120,
    ellipsis: true,
    colKey: 'user_name',
    //fixed: 'left',
  },

  {
    title: '姓名',
    align: 'left',
    width: 120,
    ellipsis: true,
    colKey: 'nick',
    //fixed: 'left',
  },
  {
    title: '联系方式',
    align: 'left',
    width: 120,
    ellipsis: true,
    colKey: 'phone',
    //fixed: 'left',
  },
  {
    title: '角色',
    align: 'left',
    width: 120,
    ellipsis: true,
    colKey: 'user_roles',
    //fixed: 'left',
  },
 {
    title: '注册日期',
    align: 'left',
    width: 120,
    ellipsis: true,
    colKey: 'register_date',
    //fixed: 'left',
  },
  {
     title: '操作',
     align: 'left',
     width: 120,
     ellipsis: true,
     colKey: 'op',
     //fixed: 'left',
   },

 

]
const data = ref([]);
const pagination = reactive({
  current: 1,
  pageSize: 20,
  total: 0,
});
const dataLoading = ref(false);
const confirmVisible = ref(false);
const selectedRowKeys = ref([]);
const drawerVisible = ref(false);
const fetchData =  (paginationInfo:any) => {
  dataLoading.value = true;
  fetchUserList(paginationInfo).then(ret=>{
     const {items,totalItems,currentPage}=ret
     data.value = items;
     pagination.total = totalItems;
     pagination.current = currentPage;

  }).catch(e=>{
    console.log('e  ',JSON.stringify(e))

  }).finally(()=>{
    dataLoading.value = false;
  })

};
fetchData({
    page: pagination.current,
    pageSize: pagination.pageSize,
  });
// 刷新数据
const refresh = async () => {
  pagination.current = 1;
  await fetchData({page:1,pageSize:pagination.pageSize});
};
const rehandlePageChange = (pageInfo:any) => {
  console.log(`rehandlePageChange${JSON.stringify(pageInfo)}`);
  pagination.current = pageInfo.current;
  pagination.pageSize = pageInfo.pageSize;
  fetchData({page:pageInfo.current,pageSize:pageInfo.pageSize});
};

const editData=ref({})
const edit=(obj:any)=>{
	var user=obj.row
	var data={
		userid:user.user_id,
		username:user.user_name,
		truename:user.true_name,
		phone:user.phone,
		roles:user.user_roles
	}
	editData.value=data
	visibleAdd.value=true
}
</script>
